<template>
  <div style="opacity: 95%;">
    <Row class="vm-login vm-panel">
      <Col span="10" class="login-form">
        <div class="login-header" style="margin-top: -14px;margin-bottom: 10px">
          <p><span>PP</span>ALBUM</p>
        </div>
        <div class="login-form">
          <Input autofocus :maxlength="6" v-model.trim="registForm.user_name"
                 placeholder="please enter username"></Input>
          <Input :maxlength="8" v-model.trim="registForm.pass_word" type="password"
                 placeholder="Please enter password"></Input>
          <Input :maxlength="11" v-model.trim="registForm.phone_number" placeholder="Please enter phone"></Input>
          <Input type="date" v-model.trim="registForm.birth_time" placeholder="Please enter bd"></Input>
          <Button type="primary" @click="regist()">Regist</Button>
        </div>
        <div class="login-footer">
          <span class="forget"><a href='login'>Login</a></span>
        </div>
      </Col>
      <Col span="14" class="login-ad"/>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'VmLogin',
  data: function () {
    return {
      registForm: {
        user_name: '',
        pass_word: '',
        phone_number: '',
        birth_time: '2000-02-22'
      }
    }
  },
  methods: {
    regist() {
      const _this = this;
      this.axios.post(_this.API.http_login + 'regist', _this.registForm).then(function (resp) {
            if (resp.data) {
              const respData = JSON.parse(JSON.stringify(resp.data))
              if (respData.code === 200) {
                _this.FUN.successMessage(_this,respData.message);
                _this.$router.push({
                  name: 'login',
                  params: {user_name: _this.registForm.user_name, pass_word: _this.registForm.pass_word}
                })
              } else {
                _this.FUN.errorMessage(_this,respData.message);
              }
            } else {
              return false;
            }
          }
      );
    },
    toLogin() {
      this.$router.push("/login")
    }
  }
}
</script>
